<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tabbar</title>
  <script src="../vue.js"></script>
  <style>
    #app {
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    ul,li {
      list-style: none;
    }
    html, body {
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    header {
      height: 44px;
      background-color: purple;
      text-align: center;
      line-height: 44px;
      color: #fff;
    }
    main {
      background-color: aliceblue;
      flex: 1;
    }
    footer {
      height: 50px;
      background-color: #eee;
      border-top: solic 1px #ccc;
    }
    footer ul {
      display: flex;
      height: 100%;
    }
    footer ul li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    footer ul li.active {
      background-color: purple;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <header>我的App</header>
      <main>
        <keep-alive exclude="tabbar-home">
          <component :is="currentComp"></component>
        </keep-alive>
      </main>
      <footer>
        <ul>
          <li
            v-for="(tab, index) in tabs"
            :class="{ active: index === currentIndex }"
            @click="handleClick(index, tab.comp)"
            :key="tab.id"
          >
            {{tab.title}}
          </li>
        </ul>
      </footer>
    </div>
  </div>
  <script type="module">
    import './tabbar-home.js'
    import './tabbar-search.js'
    import './tabbar-profile.js'
    new Vue({
      el: '#app',
      data: {
        tabs: [
          { id: '001', title: '首页', comp: 'tabbar-home' },
          { id: '002', title: '搜索', comp: 'tabbar-search' },
          { id: '003', title: '我的', comp: 'tabbar-profile' }
        ],
        currentIndex: 0,
        currentComp: 'tabbar-home'
      },
      methods: {
        handleClick(index, comp) {
          this.currentIndex = index
          this.currentComp = comp
        }
      },
    })
  </script>
</body>
</html>